import Taro from '@tarojs/taro';
import {View, Image, Text, Picker, ScrollView} from '@tarojs/components';
import {AtTabs, AtTabsPane} from 'taro-ui';
import {connect} from '@tarojs/redux';
import classNames from 'classnames';
import {actionCreator} from "../../store/actions";
import {request, unite, reLogin} from "../../utils";
import UnionidModal from '../../components/unionid-modal/unionidModal';
import PhoneModal from  '../../components/phone-modal/phoneModal';
import topBg from '../../asset/images/top_bg.png';
import Go from '../../asset/images/go.png';
import Logo from '../../asset/images/logo.png';
import AddressIcon from '../../asset/images/address_icon.png';
import Money from '../../asset/images/money_icon.png';
import Search from '../../asset/images/search_icon.png';
import Xia from '../../asset/images/xia.png';
import Gd from '../../asset/images/gd.png';
import GdIn from '../../asset/images/gd_in.png';
import './index.scss';
import SelectList from "../../components/select-list/selectList";
import TopModal from "../../components/top-modal/topModal";
import none from '../../asset/images/none.png';
import QQMapWX from "../../utils/qqmap-wx-jssdk.js";
import newPeopleBg from "../../asset/images/new_people_bg.png";
import Close from "../../asset/images/close1.png";
import diBg from "../../asset/images/di_bg.png";

class Index extends Taro.Component{
    config = {
        // navigationStyle:'custom',
        navigationStyle:'default',
        enablePullDownRefresh: true
    };
    state = {
        modelStatus: false, //更多选择
        skipTrain: false, //true 教室 false教练
        unionId: false, //授权弹窗
        phoneId: false, //授权弹窗 手机号
        phoneStatus: false, //授权弹窗 手机号1
        typeData: [], //搜索条件
        listData: [],
        classDate: '', //课程日期，格式yyyy/mm/dd
        classDateOne: '', //课程日期  去地图时需要初始化时间
        classScaleId: -1, //团课规模ID
        classTypeId: -1, //课程类型ID
        periodId: -1, //时间段区间ID
        priceId: -1, //	价格区间ID
        regionId: 340102, //区域ID
        regionStatus: 3,

        typeNameWrap: [],
        typeNameWrapText: [],
        typeName: '全部城区',

        moneyDataWrap: [], //价格区间
        moneyDataWrapText: [],
        moneyText: '0 元 - 400 元',
        moneyId: -1,

        typeAreaWrap: [],
        typeAreaWrapText: [],
        typeArea: '全部城区',
        typeAreaId: 1,
        regionStatusNext: -1,

        typeAreaNameBei: '',

        isType: false,

        isTypeNext: false,

        mordIs: null,

        title: '课程 / 地点 / 瘦身塑形',
        headerTop: null, //高度
        regularNavigation: false, //判断是否固定导航切换

        AreaName: '', //区域名称

        longitudes: '',
        latitudes: '',

        current: 0,
        getListLength: 0,
        newPeopleStatus: false, //新人优惠券弹窗
        couponsData: [], //获取新人优惠券列表

        quanIxStatus: false, //判断是否有筛选条件
        page: 1,
        bang: true // 判断是否为刘海屏幕
    };

    //获取搜索条件
    getCond = (code) => {
        const {adcode, typeDatas, getClassDate, getRegionId, areaIds, adcodeCode} = this.props;
        console.log(areaIds + 'areaIds');
        console.log(code + 'code');
        console.log(adcode + 'adcode');
        console.log(adcodeCode + 'adcodeCode');
        const params = {
            url: '/wx/firstPage/getConditionInit',
            data:{
                adcode: areaIds || code || adcode || adcodeCode
            }
        };
        request(params).then(res => {
            Taro.stopPullDownRefresh();
            if (res) {
                if(res.code == 200) {
                    Taro.stopPullDownRefresh(); //停止当前页面下拉刷新
                    typeDatas(res.data); //存储条件
                    getClassDate(res.data.weekDays[0].classDate); //默认获取时间存储
                    getRegionId(res.data.regions[0].parentRegionId); //记住省区域id
                    let name = [], name1 = [], name2 = [];
                    res.data.classTypes.forEach((item) => {
                        name.push(item.classTypeName);
                    });
                    res.data.regions.forEach((item) => {
                        name1.push(item.description);
                    });
                    res.data.prices.forEach((item) => {
                        name2.push(item.priceName);
                    });
                    this.setState({
                        typeData: res.data,
                        regionId: res.data.regions[0].regionId == -1 ? res.data.regions[0].parentRegionId : res.data.regions[0].regionId, //默认获取区域id
                        typeAreaId: res.data.regions[0].parentRegionId, //搜索默认区域id
                        regionStatus: res.data.regions[0].regionId,
                        classDate: res.data.weekDays[0].classDate, //默认获取时间
                        classDateOne: res.data.weekDays[0].classDate, //课程日期  去地图时需要初始化时间
                        typeNameWrap: res.data.classTypes,
                        typeNameWrapText: name,
                        typeAreaWrap: res.data.regions,
                        typeAreaWrapText: name1,
                        moneyDataWrap: res.data.prices, //价格区间
                        moneyDataWrapText: name2,
                    }, () => {
                        const {typeAreaNameBei} = this.state;
                        const {oneAdcodeName,adcodeName} = this.props;
                        res.data.regions.forEach((item) => {
                            if (item.description == typeAreaNameBei) {
                                this.setState({
                                    // typeAreaId: item.regionId,
                                    // regionStatusNext: item.regionId,
                                })
                            }
                        });
                        if (oneAdcodeName != adcodeName) {
                            this.setState({
                                regionStatusNext: -1,
                                typeArea: adcodeName,
                                longitudes: res.data.regions[0].longitude,
                                latitudes: res.data.regions[0].latitude,
                            })
                        } else {
                            this.setState(prevState => ({
                                typeArea: adcodeName || prevState.typeArea,
                                longitudes: '',
                                latitudes: '',
                            }))
                        }
                        this.getList(); //获取课程列表
                    })
                }
            }
        })
    };

    temp = {
        isLoading: false,
        isRefreshing: false, // 防止重复刷新
        name: ''
    };

    componentDidMount(){
        let res = wx.getSystemInfoSync();
        console.log(res,'手机顶部高度');
        // if(res.statusBarHeight >= 44) {
        //     console.log('进来了是刘海屏幕');
        //     this.setState({
        //         bang: res.statusBarHeight >= 44
        //     })
        // }
        const {peopleStatus} = this.props;
        //滑动效果
        setTimeout(() => {
            const query = Taro.createSelectorQuery().select('.headers').boundingClientRect();
            query.exec(recs => {
                if (recs && recs[0]) {
                    console.log(recs[0].top + 'recs[0].top');
                    let num = recs[0].top;
                    if (Number(recs[0].top) < 360) {
                        num = 360;
                    }
                    this.setState({
                        headerTop: Number(recs[0].top) - 42
                    });
                }
            })
        }, 0);
        this.setState({
            newPeopleStatus:  peopleStatus, //新人优惠券领取弹窗
        }, () => {
            if (peopleStatus) {
                //获取新人优惠券列表
                request({ url: '/wx/coupon/listNewUserCoupons', data:{}}).then(res => {
                    if (res && res.data) {
                        this.setState({
                            couponsData: res.data
                        });
                    }
                });
            }
        });
    }

    componentDidShow() {
        const {AreaName} = this.state;
        const {userToken, searchTitle, adcodeName} = this.props;
        console.log(adcodeName + 'adcodeName');
        if (userToken) {
            if (searchTitle) {
                this.setState({
                    title: searchTitle ? searchTitle.text : '课程 / 地点 / 瘦身塑形',
                }, () => {
                    // const {getSearchTitle} = this.props;
                    //skipTrain true课程 false教室
                    // getSearchTitle('');
                })
            } else {
                this.setState({
                    title: searchTitle ? searchTitle.text : '课程 / 地点 / 瘦身塑形',
                    AreaName: adcodeName,
                }, () => {
                    if (adcodeName != AreaName) {
                        this.init();  // 判断地理位置是否授权
                    }
                })
            }
        } else {
            this.getLogin(); //获取登陆
        }
    }

    //获取登陆
    getLogin = () => {
        reLogin().then((res) => {
            if (res.data) {
                if (res.data.existUser == 0) {
                    this.setState({
                        unionId: true,
                        isTypeNext: true,
                        phoneId: res.data.mobileFlag, // 0未授权手机号
                    })
                } else{
                    this.setState({
                        phoneId: res.data.mobileFlag, // 0未授权手机号
                    }, () => {
                        this.init();
                    });
                }
            }
        })
    };

    // 判断地理位置是否授权
    init = () => {
        const {map} = this.props;
        // 判断地理位置是否授权
        if(!(map && map.latitude && map.longitude)) {
            this.onReady(); //进行授权经纬度
        } else {
            this.getCond(); //获取搜索条件
        }
    };

    //获取课程列表
    getList = () => {
        const {classDate, classScaleId, classTypeId, periodId, priceId, regionId, regionStatus, phoneId, page} = this.state;
        this.temp.isLoading = true;
        const params = {
            url: '/wx/firstPage/getHotClassList',
            data:{
                classDate,
                classScaleId,
                classTypeId: [classTypeId], //课程类型ID
                periodId,
                priceId,
                regionId, //216139816784549890
                queryType: regionStatus == -1 ? 3 : 1,
                pageNo: page,
                pageSize: 5,
            }
        };
        request(params).then(res => {
            this.temp.isLoading = false;
            if (res) {
                if(res.code == 200) {
                    console.log(phoneId);
                    this.setState(prevState => ({
                        listData: page === 1 ? res.data : prevState.listData.concat(res.data),
                        isType: false,
                        isTypeNext: true,
                        phoneStatus: phoneId == 0 ? false : true, //false 未获取手机号  true 已获取手机号
                        getListLength: res.data.length,
                    }))
                    //判断是否为最后一页
                    if (res.data.length < 5) {
                        this.temp.isLoading = true; //
                    }
                }
            }
        })
    };

    //进行授权经纬度
    onReady = () => {
        Taro.getSetting().then((res) => {
            if (res.authSetting['scope.userLocation'] !== undefined && res.authSetting['scope.userLocation'] === false) {//非初始化进入该页面,且未授权
                Taro.showModal({
                    title: "是否授权当前位置",
                    content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
                    success: (data) => {
                        if (data.cancel) {
                            //授权成功后执行
                            if (this.temp.isRefreshing) {
                                Taro.stopPullDownRefresh(); //停止当前页面下拉刷新
                                this.temp.isRefreshing = false;
                            }
                        } else if (data.confirm) {
                            Taro.openSetting({
                                success: (datas) => {
                                    console.log(datas + 'datas');
                                    if (datas.authSetting["scope.userLocation"]) {
                                        unite.showToast("授权成功", 'success', 5000).then(() => {
                                            // 授权成功，初始化数据
                                            this.getCond(); //获取搜索条件
                                        });

                                    } else {
                                        unite.showToast("授权失败");
                                    }
                                }
                            })
                        }
                    },
                    fail: () => {
                        //授权成功后执行
                        if (this.temp.isRefreshing) {
                            Taro.stopPullDownRefresh(); //停止当前页面下拉刷新
                            this.temp.isRefreshing = false;
                        }
                    }
                })
            } else if (res.authSetting['scope.userLocation'] === undefined) {//初始化进入
                this.getLocation(); //初始化
            } else if (res.authSetting['scope.userLocation']){
                this.getLocation();
            }
        })
    };

    // 获取地理位置
    getLocation = () => {
        const {setMap} = this.props;
        // 获取地理位置  调起 this.getLocation 授权再执行下一步
        wx.getLocation({
            type: 'gcj02' //返回可以用于wx.openLocation的经纬度
        }).then(res => {
            console.log(JSON.stringify(res) + 'zhao123');
            setMap({
                latitude: res.latitude,
                longitude: res.longitude
            });
            let _this = this;
            let qqmapsdk = new QQMapWX({
                key: '5MUBZ-IK23X-BMF4X-7BTEQ-HNILT-GZBYS'
            });
            //根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
            qqmapsdk.reverseGeocoder({
                location: {
                    latitude: res.latitude, //纬度
                    longitude: res.longitude //经度
                },
                success: (addressRes) => {
                    const {getAdcodeCode, getAdcodeName, getnOneAdcodeCode, getOneAdcodeName} = this.props;
                    let code = addressRes.result.ad_info.adcode;
                    getAdcodeCode(code);
                    getnOneAdcodeCode(code);
                    getAdcodeName(addressRes.result.address_component.city);
                    getOneAdcodeName(addressRes.result.address_component.city);
                    // this.temp.name = addressRes.result.address;
                    _this.setState({
                        // typeArea: addressRes.result.address,
                        typeAreaNameBei: addressRes.result.ad_info.district,
                        AreaName: addressRes.result.address_component.city,
                    }, () => {
                        _this.getCond(code); //获取搜索条件
                    })
                }
            });
            // qqmapsdk.getDistrictByCityId({
            //     id: 350100,
            //     success: function (ret) {
            //         console.log(JSON.stringify(ret) + 'retaaaaaaaaaaaaaaaaaaaaaaaaaaa');
            //     }
            // });

        }).catch(() => {
            unite.showTipModal("授权失败, 重新为您获取位置,或重启小程序");
            this.getLocation();
        })
    };

    // getQqmapsdk = (res) => {
    //     let _this = this;
    //     let qqmapsdk = new QQMapWX({
    //         key: '5MUBZ-IK23X-BMF4X-7BTEQ-HNILT-GZBYS'
    //     });
    //     //根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
    //     qqmapsdk.reverseGeocoder({
    //         location: {
    //             latitude: res.latitude, //纬度
    //             longitude: res.longitude //经度
    //         },
    //         success: (addressRes) => {
    //             let code = addressRes.result.ad_info.adcode;
    //             _this.setState({
    //                 adcodes: code,
    //             }, () => {
    //                 _this.getCond(code); //获取搜索条件
    //             })
    //         }
    //     });
    // };

    //跳转地图
    skipMap = () => {
        const {typeData, classDateOne, longitudes, latitudes} = this.state;
        const {map} = this.props;
        Taro.stopPullDownRefresh();
        if (map) {
            const {map:{latitude, longitude}} = this.props;
            if (latitude) {
                if (longitudes) {
                    Taro.navigateTo({
                        url: '/pages/index/map/map?regionId=' + typeData.regions[0].regionId + '&longitude=' + longitudes + '&latitude=' + latitudes + '&timer=' + classDateOne
                    })
                } else {
                    Taro.navigateTo({
                        url: '/pages/index/map/map?regionId=' + typeData.regions[0].regionId + '&longitude=' + longitude + '&latitude=' + latitude + '&timer=' + classDateOne
                    })
                }
            } else {
                unite.showTipModal("定位失败，请确认微信定位功能是否开启！");
                this.init();  // 判断地理位置是否授权
            }
        } else {
            unite.showTipModal("定位失败，请确认微信定位功能是否开启！");
            this.init();  // 判断地理位置是否授权
        }
    };

    //跳转课程详情
    skipCourseDetail = (classId, dispatchId, reservedStatus) => {
        Taro.navigateTo({
            url: './course-detail/courseDetail?classId=' + classId + '&dispatchId=' + dispatchId + '&reservedStatus=' + reservedStatus,
        })
    };

    //跳转教练详情
    skipTrainDetail = (id, e) => {
        e.stopPropagation(); //防止父级点击事件干扰
        Taro.navigateTo({
            url: './train-detail/trainDetail?id=' + id
        })
    };

    //跳转课程列表
    skipCourseList = () => {
        Taro.navigateTo({
            url: './course-list/courseList'
        })
    };

    //跳转教室详情
    skipClassRoomDetail = (id, avatar, roomName, address, latitude, longitude) => {
        Taro.navigateTo({
            url: `./classroom-detail/classroomDetail?id=${id}&avatar=${avatar}&roomName=${roomName}&address=${address}&latitude=${latitude}&longitude=${longitude}`
        })
    };

    goToMap = (roomName, address, latitude, longitude, e) => {
        e.stopPropagation(); //防止父级点击事件干扰
        if (latitude) {
            Taro.openLocation({
                latitude: Number(latitude),
                longitude: Number(longitude),
                name: roomName,
                address: address
            })
        } else {
            unite.showToast('该店铺暂无经纬度');
        }
    };

    //授权
    unGetUserInfo = () => {
        this.setState({
            unionId: false, //关闭 nu ni id 弹窗
        });
        this.init();  // 判断地理位置是否授权
    };

    //授权手机号
    unGetPhone = (is) => {
        this.setState({
            phoneStatus: true,
            phoneId: true, //关闭弹窗
        });
    };

    onChangeType = (name, res) => {
        console.log(name, res,'是res');
        const {typeNameWrap, typeAreaWrap, moneyDataWrap, classScaleId, periodId, priceId, regionId, classDate} = this.state;
        const {regionIds, setClassDate} = this.props;
        let nameType = '';
        let nameId = '';
        if(name == 'typeName') {
            nameType = typeNameWrap[res].classTypeName;
            nameId = typeNameWrap[res].classTypeID;
            this.setState({
                typeName: nameType,
                classTypeId: nameId,
                // quanIxStatus: (res == 0 && classScaleId == -1 && periodId == -1 && priceId == -1 && regionId == regionIds && classDate == setClassDate) ? false : true,
            }, () => {
                console.log(res, classScaleId,periodId,priceId ,regionId , regionIds , classDate , setClassDate);
                this.getList();
            });
        } else if (name == 'typeArea'){
            nameType = typeAreaWrap[res.detail.value[0]].description;
            nameId = typeAreaWrap[res.detail.value[0]].regionId;
            let typeStatus = typeAreaWrap[res.detail.value].parentRegionId;
            this.setState({
                typeArea: nameType,
                typeAreaId: nameId == -1 ? typeStatus : nameId,
                regionStatusNext: nameId,
            });
        } else if (name == 'moneyText'){
            nameType = moneyDataWrap[res.detail.value[0]].priceName;
            nameId = moneyDataWrap[res.detail.value[0]].priceID;
            this.setState({
                moneyText: nameType,
                moneyId: nameId,
            });
        }
    };

    // 下拉刷新
    onPullDownRefresh = () => {
        // const {userToken} = this.props;
        const {map} = this.props;
        // // 判断地理位置是否授权
        if(!(map && map.latitude && map.longitude)) {
            this.onReady(); //进行授权经纬度
        } else {
            this.skipMap();
        }
        // this.setState({
        //     typeData: []
        // }, () => {
        //     if (userToken) {
        //         this.init();
        //     } else {
        //         this.getLogin(); // 进入小程序时网络出错， 再次刷新重登login
        //     }
        // })

    };

    //切换教室、教练
    blockedOut = (type) => {
        this.setState({
            skipTrain: type,
        });
    };

    //跳转查询列表
    skipList = () => {
        const {skipTrain, typeAreaId, moneyId, regionId, regionStatusNext, headerTop} = this.state;
        const {getSearchTitle, searchTitle} = this.props;
        //searchTitle.ix   1人数  2课程类型  3时间   4日期
        //skipTrain true课程  false教室
        getSearchTitle('');
        if (skipTrain) { //课程
            // Taro.pageScrollTo({
            //     scrollTop: headerTop-20,
            //     duration: 500
            // })
            // this.setState({
            //     regionId: typeAreaId,
            //     regionStatus: regionStatusNext,
            //     priceId: moneyId,
            // }, () => {
            //     this.getList();
            // })
            if (searchTitle) {
                if (searchTitle.ix == 1) { //人数
                    Taro.navigateTo({
                        url: `./course-list/courseList?typeAreaId=${typeAreaId}&moneyId=${moneyId}&regionStatusNext=${regionStatusNext}&classScaleId=${searchTitle.id}`
                    })
                } else if (searchTitle.ix == 2) { //课程类型
                    Taro.navigateTo({
                        url: `./course-list/courseList?typeAreaId=${typeAreaId}&moneyId=${moneyId}&regionStatusNext=${regionStatusNext}&typeNameId=${searchTitle.id}`
                    })
                } else if (searchTitle.ix == 3) { //时间
                    Taro.navigateTo({
                        url: `./course-list/courseList?typeAreaId=${typeAreaId}&moneyId=${moneyId}&regionStatusNext=${regionStatusNext}&periodId=${searchTitle.id}`
                    })
                } else if (searchTitle.ix == 4) { //日期
                    console.log(searchTitle.id);
                    Taro.navigateTo({
                        url: `./course-list/courseList?typeAreaId=${typeAreaId}&moneyId=${moneyId}&regionStatusNext=${regionStatusNext}&classDate=${searchTitle.id}`
                    })
                }
            } else {
                Taro.navigateTo({
                    url: `./course-list/courseList?typeAreaId=${typeAreaId}&moneyId=${moneyId}&regionStatusNext=${regionStatusNext}`
                })
            }
        } else { //教室
            if (searchTitle) {
                if (searchTitle.ix == 1) { //人数
                    Taro.navigateTo({
                        url: `./train-list/trainList?typeAreaId=${typeAreaId}&moneyId=${moneyId}&regionStatusNext=${regionStatusNext}&classScaleId=${searchTitle.id}`
                    })
                } else if (searchTitle.ix == 2) { //课程类型
                    Taro.navigateTo({
                        url: `./train-list/trainList?typeAreaId=${typeAreaId}&moneyId=${moneyId}&regionStatusNext=${regionStatusNext}&typeNameId=${searchTitle.id}`
                    })
                } else if (searchTitle.ix == 3) { //时间
                    Taro.navigateTo({
                        url: `./train-list/trainList?typeAreaId=${typeAreaId}&moneyId=${moneyId}&regionStatusNext=${regionStatusNext}&periodId=${searchTitle.id}`
                    })
                } else if (searchTitle.ix == 4) { //日期
                    Taro.navigateTo({
                        url: `./train-list/trainList?typeAreaId=${typeAreaId}&moneyId=${moneyId}&regionStatusNext=${regionStatusNext}`
                    })
                }
            } else {
                Taro.navigateTo({
                    url: `./train-list/trainList?typeAreaId=${typeAreaId}&moneyId=${moneyId}&regionStatusNext=${regionStatusNext}`
                })
            }
        }
    };

    //跳转搜索页面
    skipSearch = () => {
        Taro.navigateTo({
            url: "./search/search"
        })
    };

    getTimers = (time, index) => {
        this.setState({
            classDate: time,
            current: index,
            page: 1,
        }, () => {
            this.getList() //获取课程列表
        });
    };

    getTypes = (item) => {
        const {regionId, typeArea, typeData} = this.state;
        const {typeDatas} = this.props;
        // let typeDataName = typeData;
        // let typeAreaName = typeArea;
        //     this.state.typeAreaWrap.forEach((value) => {
        //     if (value.regionId == item.regionId) {
        //         typeAreaName = value.description;
        //         console.log(value.description + 'z');
        //     }
        // });
        // typeDataName.
        console.log(item.quanIxStatus)
        this.setState({
            // typeArea: typeAreaName,
            // typeAreaId: item.regionId, //地区,
            classScaleId: Number(item.selectList) || -1, //1v1
            periodId: Number(item.tgTypeId) || -1, //时间段
            regionId: item.regionId, //地区
            typeStatus: item.typeStatus,
            regionStatus: item.regionStatus,
            classTypeId: item.classTypeId || '-1', //课程类型
            priceId: Number(item.moneyId) || -1, //价格id
            quanIxStatus: item.quanIxStatus, //判断是否有筛选条件
            modelStatus: false,
            isType: true,
            page: 1,
        }, () => {
            this.getList() //获取课程列表
        })
    };

    showModel = () => {
        this.setState(prevState => ({
            modelStatus: !prevState.modelStatus
        }))
    };

    mordStatus = (is) => {
        const {mordIs} = this.state;
        this.setState({
            mordIs: is == mordIs ? null : is
        })
    };

    onPageScroll = (e) => {
        const {headerTop} = this.state;
        this.setState({
            regularNavigation: e.scrollTop > headerTop
        });
    };

    tabsClick = (is) => {
        const {getData} = this.props;
        let timer = getData.weekDays;
        this.setState({
            current: is,
            classDate: timer[is].classDate
        }, () => {
            this.getList();
        });
    };

    //关闭新人优惠券弹窗
    closePeople = () => {
        this.setState((pervState) =>({
            newPeopleStatus: !pervState.newPeopleStatus
        }));
    };

    //领取新人优惠券
    receivePeople = () => {
        const {setPeople} = this.props;
        const params = {
            url: '/wx/coupon/getNewUserCoupons',
            data:{}
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200){
                    unite.showToast('领取成功');
                    setPeople(false);
                }
            }
        })
    };

    //底部上拉刷新加载更多
    onReachBottom() {
        if(this.temp.isLoading) return;
        this.setState((pervState) =>({
            page: pervState.page + 1
        }),() => {
            this.getList();
        })
    };

    render() {
        const {unionId, moneyText, listData, typeData, typeName, typeNameWrap,
            moneyDataWrapText, typeAreaWrapText, typeArea, skipTrain, modelStatus,
            classDate, regionId, isType, isTypeNext, mordIs, regionStatus, title,
            regularNavigation, classTypeId, priceId, classScaleId, AreaName, current,
            phoneStatus, getListLength, newPeopleStatus, couponsData, quanIxStatus,
            periodId, bang
        } = this.state;
        const {adcodeCode, getData, peopleStatus} = this.props;
        console.log(typeof classTypeId + 'classTypeId')
        return(
            <View className="page">
                <View className={!regularNavigation ? 'keep-head-map' : 'keep-head-map keep-head-map-regular'}>
                    <View className={`map-address flex-l ${!bang ? 'get-bang' : ''}`} style={'top:' + (Taro.getSystemInfoSync()['statusBarHeight']+16) + 'px;'} onClick={() => {Taro.navigateTo({url: './select-area/selectArea?name='+AreaName+'&code='+adcodeCode})}}>
                        <View>{AreaName}</View>
                        <Image className="xia-img" src={Xia} mode="widthFix"/>
                    </View>
                    <Image className={`keep-head-img ${!bang ? 'get-bang-img' : ''}`} src={topBg} mode="widthFix" onClick={this.skipMap}/>
                    {/*<View className="keep-head-wrap">*/}
                    {/*    <View className="keep-head-wrap-next">*/}
                    {/*        <View className="wrap-next-btn-wrap">*/}
                    {/*            <View className={`btn-item ${skipTrain ? '' : 'btn-item-left'}`} onClick={this.blockedOut.bind(this, true)}>课程</View>*/}
                    {/*            <View className={`btn-item ${skipTrain ? 'btn-item-right' : ''}`} onClick={this.blockedOut.bind(this, false)}>教练</View>*/}
                    {/*        </View>*/}
                    {/*        <View className="wrap-next-select flex-lr">*/}
                    {/*            <View className="flex-l">*/}
                    {/*                <Image className="head-img-icon" src={AddressIcon} mode="widthFix"/>*/}
                    {/*                <Picker className="vocations-picker" mode='multiSelector' range={[typeAreaWrapText]} onChange={this.onChangeType.bind(this, 'typeArea')}>*/}
                    {/*                    <View className={classNames('picker',{pickerColor: typeArea !== '请选择区域'})}>*/}
                    {/*                        {typeArea}*/}
                    {/*                    </View>*/}
                    {/*                </Picker>*/}
                    {/*            </View>*/}
                    {/*            <View className="flex-r next-select-wrap" onClick={() => {Taro.navigateTo({url: './select-area/selectArea?name='+AreaName+'&code='+adcodeCode})}}>*/}
                    {/*                <View>{AreaName}</View>*/}
                    {/*                <Image className="head-img-icon-xia" src={Xia} mode="widthFix"/>*/}
                    {/*            </View>*/}
                    {/*        </View>*/}
                    {/*        <View className="wrap-next-select flex-lr">*/}
                    {/*            <View className="flex-l">*/}
                    {/*                <Image className="head-img-icon" src={Money} mode="widthFix"/>*/}
                    {/*                <Picker className="vocations-picker" mode='multiSelector' range={[moneyDataWrapText]} onChange={this.onChangeType.bind(this, 'moneyText')}>*/}
                    {/*                    <View className={classNames('picker',{pickerColor: moneyText !== '1 元 - 400 元'})}>*/}
                    {/*                        {moneyText}*/}
                    {/*                    </View>*/}
                    {/*                </Picker>*/}
                    {/*            </View>*/}
                    {/*        </View>*/}
                    {/*        <View className="wrap-next-select wrap-next-select-bottom flex-lr" onClick={this.skipSearch}>*/}
                    {/*            <View className="flex-l">*/}
                    {/*                <Image className="head-img-icon" src={Search} mode="widthFix"/>*/}
                    {/*                <View>{title}</View>*/}
                    {/*            </View>*/}
                    {/*        </View>*/}
                    {/*        <View className="wrap-next-btn" onClick={this.skipList}>查询</View>*/}
                    {/*    </View>*/}
                    {/*</View>*/}
                </View>
                <View className="keep-head">
                    {/*<View className="list-head-bottom"></View>*/}
                    <View className="keep-content">
                        {/*<View className="keep-head-content flex-l">*/}
                        {/*    <View className="keep-head-jl"></View>*/}
                        {/*    <View>热门课程</View>*/}
                        {/*</View>*/}
                        <View className="headers-fixed-content">
                            <View className={`headers ${regularNavigation ? 'headers-fixed' : ''} ${!bang ? 'get-bang-fixed' : ''}`}>
                                {/*{regularNavigation &&(*/}
                                {/*    <View className="keep-head-content flex-l">*/}
                                {/*    </View>*/}
                                {/*)}*/}
                                <View className="leixin-list-wrap flex-lr">
                                    <View className="leixin-list">
                                        {typeNameWrap.map((item, index) => (
                                            <View className={`list-item ${(classTypeId == item.classTypeID) ? 'list-item-active' : ''}  ${item.classTypeName.length == 2 ? 'length-two': item.classTypeName.length == 3 ? 'length-three' : ''}`} key={index} onClick={this.onChangeType.bind(this, 'typeName', index)}>
                                                {/*<Image className="leixin-item-img" src={classTypeId == item.classTypeID ? item.selectedAvatar : item.avatar}/>*/}
                                                <View className="leixin-item-name">{item.classTypeName}</View>
                                                <View className={`${(classTypeId == item.classTypeID) ? 'list-active-heng' : ''}`}></View>
                                            </View>
                                        ))}
                                    </View>
                                    <View className={`leixin-Gd-wrap flex-center ${quanIxStatus ? 'leixin-Gd-wrap-in' : ''}`} onClick={this.showModel}>
                                        <Image className="leixin-Gd-img" src={quanIxStatus ? GdIn : Gd}/>
                                        <View>筛选</View>
                                    </View>
                                </View>
                                <View className="keep-content-list">
                                    {typeData.length != 0 &&(
                                        <SelectList getClassDate={classDate} onTimer={this.getTimers}/>
                                    )}
                                </View>
                            </View>
                        </View>
                        <View className={regularNavigation ? 'keep-contents-wrap-active keep-contents-wrap' : 'keep-contents-wrap'}>
                            <AtTabs className="com-tabs" current={current} tabList={getData.weekDays} onClick={this.tabsClick.bind(this)}>
                                {getData.length != 0 && getData.weekDays.map((va, ixs) => (
                                    <AtTabsPane current={current} key={ixs} index={ixs+1} >
                                        <ScrollView
                                            className="content-view"
                                            scrollY
                                            upperThreshold={3}
                                            scroll-with-animation
                                            enhanced
                                            show-scrollbar
                                            paging-enabled
                                            fast-deceleration
                                            lowerThreshold={3}
                                        >
                                            {listData && listData.length != 0 && listData.map((item, index) => (
                                                <View className={`keep-contents ${(Number(getListLength) -1) === index ? 'keep-contents-db' : ''}`} key={index}>
                                                    <View className="keep-heads" >
                                                        <View className="keep-head-tops" onClick={this.skipClassRoomDetail.bind(this, item.roomId,item.avatar,item.roomName,item.address,item.latitude, item.longitude)}>
                                                            <View className="flex-l">
                                                                <Image className="keep-img" src={item.avatar}/>
                                                                <View>{item.roomName}</View>
                                                            </View>
                                                            {/*<View className="keep-head-bt">*/}
                                                            {/*    <View>{item.roomName}</View>*/}
                                                            {/*    <View className="text-address text-overflow">{item.address}</View>*/}
                                                            {/*</View>*/}
                                                            <View className="keep-head-more flex-r" onClick={this.goToMap.bind(this, item.roomName,item.address,item.latitude, item.longitude)}>
                                                                <Image className="icon-img" src={Go}/>
                                                                <View>去这里</View>
                                                            </View>
                                                        </View>
                                                        <View className={`keep-content ${index == mordIs ? 'keep-content-height' : ''}`}>
                                                            {item.hotClasses && item.hotClasses.map((value, is) => (
                                                                <View className="keep-content-list-item" key={is} onClick={this.skipCourseDetail.bind(this, value.classId, value.dispatchId, value.reservedStatus)}>
                                                                    <Image className="list-img" src={value.avatar} onClick={this.skipTrainDetail.bind(this, value.coachId)}/>
                                                                    <View className={`list-centent-left-wrap ${item.hotClasses.length == (is+1) ? 'list-centent-left-wrap-heng' : ''}`}>
                                                                        <View className="list-centent">
                                                                            <View className="name">{value.className}</View>
                                                                            <View className="timer">{value.classBeginTime}-{value.classEndTime} <Text className="text">￥{value.price}/节</Text></View>
                                                                            <View className="type flex-l">
                                                                                {/*<View className="list-top-left flex-center text-overflow">{value.reservedInfo}</View>*/}
                                                                                {value.labelNames.map((items, indexs) => (
                                                                                    <View className="kepp-gg flex-center" key={indexs}>{items}</View>
                                                                                ))}
                                                                            </View>
                                                                        </View>
                                                                        <View className={`list-right-bt ${value.reservedStatus == 0 ? '' : 'list-right-bt-ym'}`}>{value.reservedStatus == 0 ? '预约' : '已约满'}</View>
                                                                    </View>
                                                                </View>
                                                            ))}
                                                        </View>
                                                        {item.hotClasses.length >= 4 && (
                                                            <View className="jiazaigengduo flex-center" onClick={this.mordStatus.bind(this, index)}>{index == mordIs ? '收起' : '查看更多'}</View>
                                                        )}
                                                    </View>
                                                </View>
                                            ))}
                                            {listData && listData.length == 0 &&(
                                                <View className="none" style="margin-top: 50px;">
                                                    <image src={none}/>
                                                    <View>暂无数据</View>
                                                </View>
                                            )}
                                        </ScrollView>
                                    </AtTabsPane>
                                ))}
                            </AtTabs>
                        </View>
                    </View>
                </View>
                {modelStatus &&(
                    <TopModal
                        getClassTypeId={classTypeId} //类型id
                        getPriceId={priceId} //价格id
                        onClose={this.showModel}
                        getRegionId={regionId} //区域id
                        getTimer={classDate}
                        getClassScaleId={classScaleId} //类型id 一对一  一对多
                        getPeriodId={periodId}
                        onRegionStatus={regionStatus}
                        onExport={this.getTypes}
                    />
                )}
                {unionId &&(
                    <UnionidModal onCancel={this.unGetUserInfo}/>
                )}
                {/*    新人优惠券弹窗*/}
                {newPeopleStatus && (
                    <View className="model-type flex-center">
                        <View className="people-constnt-wrap">
                            <Image className="imgs-people" src={newPeopleBg} mode="aspectFit"/>
                            <Image className="imgs-close" onClick={this.closePeople} src={Close} mode="aspectFit"/>
                            <View className="people-content">
                                <View className="content-wrap">
                                    {couponsData && couponsData.map((item, index) => (
                                        <View className="item-list" key={index}>
                                            <Image className="imgs-list" src={diBg} mode="aspectFit"/>
                                            <View className="left-titles">
                                                <View className="price">￥{item.favourableCharge}</View>
                                                <View>满{item.minCharge}可用</View>
                                            </View>
                                            <View className="left-titles-next">
                                                <View className="name">{item.clientName}</View>
                                                <View className="tiishi">有效期：{item.effectTime}{item.expireTime ? '~' + item.expireTime : item.expireTime}</View>
                                            </View>
                                        </View>
                                    ))}
                                </View>
                                <View className="btns-wrap flex-center">
                                    {peopleStatus ? (
                                        <View className="btns flex-center" onClick={this.receivePeople}>点击领取</View>
                                    ) : (
                                        <View>
                                            <View className="succus-name">已成功领取</View>
                                            <View className="succus-names-next">在“我的-优惠券查看”</View>
                                        </View>
                                    )}
                                </View>
                            </View>
                        </View>
                    </View>
                )}
                {/*{!phoneStatus &&(*/}
                {/*    <PhoneModal onCancel={this.unGetPhone}/>*/}
                {/*)}*/}
                {/*{!isTypeNext &&(*/}
                {/*    <View className="index-model-next">*/}
                {/*        /!*<Image className="model-next-logo" src={Logo} mode="widthFix"/>*!/*/}
                {/*        <View className="jiazai-text">*/}
                {/*            <View>动态静止</View>*/}
                {/*            <View className="text">你身边的健身专家</View>*/}
                {/*        </View>*/}
                {/*    </View>*/}
                {/*)}*/}
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {userToken, map, searchTitle, areaIds, adcodeCode, adcodeName,oneAdcodeCode, oneAdcodeName, getData, peopleStatus, regionIds, setClassDate} = state;
    return {
        userToken,
        map,
        searchTitle,
        areaIds,
        adcodeCode,
        adcodeName,
        oneAdcodeCode,
        oneAdcodeName,
        getData,
        peopleStatus,
        regionIds,
        setClassDate
    }
};

const mapDispatchToProps = {
    setMap: actionCreator.setMap,
    typeDatas: actionCreator.typeData,
    getClassDate: actionCreator.getClassDate,
    getSearchTitle: actionCreator.getSearchTitle,
    getRegionId: actionCreator.getRegionId,
    getAdcodeCode: actionCreator.getAdcodeCode,
    getAdcodeName: actionCreator.getAdcodeName,
    getnOneAdcodeCode: actionCreator.getnOneAdcodeCode,
    getOneAdcodeName: actionCreator.getOneAdcodeName,
    setPeople: actionCreator.setPeople,
};
export default connect(mapStateToProps, mapDispatchToProps)(Index);
